<template>
  <div class="home">
    <!-- 菜单导航 -->
    <div class="menu">
      <el-menu
      default-active="1-4-1"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="#121a2a"
      text-color="#fff"
      >
    <el-menu-item
      v-for="nav in navrouterRole"
      :key="nav.index"
      @click="$router.push(nav.path)">
      <!-- 动态渲染导航菜单 -->
      <template slot="title">
        <span slot="title"> {{nav.name}} </span>
      </template>
    </el-menu-item>
      </el-menu>
    </div>
    <!-- 主体部分 -->
    <div class="main">
      <!-- top导航部分 -->
      <div class="top">
        <!-- 展开收起 -->
        <div class="isShowMenu" @click="isShowMenu">
          <i class="el-icon-s-fold"></i>
        </div>
        <!-- 面包屑导航 -->
        <div class="breadnav">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-dropdown>
          <div class="block">
              <el-avatar :size="40" :src = user.headimg ></el-avatar>
              <p> {{user.username }} </p>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>消息中心</el-dropdown-item>
            <el-dropdown-item @click.native="removeUser">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="centre">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
export default {
  data () {
    return {
      // 判断是否是导航路由
      navrouter: this.$router.options.routes[1].children.filter(navs => navs.meta.isNav),
      navrouterRole: [],
      isCollapse: false, // 是否展开
      // 获取用户信息 因为缓存中的数据都是字符串 所以要转为对象
      // 取缓存用三目以防没有报错
      user: Cookie.get('userInfo') ? JSON.parse(Cookie.get('userInfo')) : {}
    }
  },
  created () {
    this.filterNav()
  },
  methods: {
    // 过滤数据
    filterNav () {
      this.navrouterRole = this.navrouter.filter(route => route.meta.roles.includes(Cookie.get('role')))
    },
    // 退出登录
    removeUser () {
      Cookie.remove('token')
      Cookie.remove('userInfo')
      Cookie.remove('role')
      this.$router.go(0)
    },
    // 点击按钮显示关闭 菜单
    isShowMenu () {
      this.isCollapse = !this.isCollapse
    }
  }
}
</script>
<style lang="scss" scoped>
.home{
  display: flex;
  overflow: hidden;
  height: 100%;
  .menu{
    height: 100%;
    .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 100%;
  }
    .el-menu-vertical-demo,.el-menu--collaps,el-menu{
    height: 100%;
    }
  }
  .main{
    flex: 1;
  overflow-y:scroll;
    .top{
      display: flex;
      height: 50px;
      width: 100%;
      background:#fff;
      justify-content: space-around;
      align-items: center;
      .isShowMenu{
        width: 50px;
        font-size: 24px;
        text-align: center;
      }
      .block{
        display: flex;
        align-items: center;
        p{
          margin-left: 10px;
        }
      }
    }
    .centre{
      width: 100%;
      padding: 10px;
    }
  }
}
</style>
